<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>09_员工列表练习</title>
</head>
<body>
    <input type="text" placeholder="请输入员工姓名" id="i1">
    <input type="text" placeholder="请输入员工工资" id="i2">
    <input type="text" placeholder="请输入员工岗位" id="i3">
    <button onclick="f1()">添加员工</button>
    <hr>
    <table border="1px">
        <caption>
            员工表
        </caption>
        <tr>
            <th>姓名</th>
            <th>工资</th>
            <th>岗位</th>
        </tr>
    </table>
    <script>
        let arr=[];
        function f1(){
            let data1=document.getElementById('i1').value;
            let data2=document.getElementById('i2').value;
            let data3=document.getElementById('i3').value;

            let data4=document.createElement('tr');
            let data5=document.createElement('td');
            let data6=document.createElement('td');
            let data7=document.createElement('td');

            console.log(data5);
            console.log(data4);
            data5.innerHTML=data1;
            data6.innerHTML=data2;
            data7.innerHTML=data3;
            data4.append(data5,data6,data7);


            let table=document.querySelector('table');
            table.append(data4);

            document.getElementById('i1').value='';
            document.getElementById('i2').value='';
            document.getElementById('i3').value='';

            arr.push(
                {
                    name:data1,
                    salary:data2,
                    job:data3
                }
            )
            console.log(arr);







        }
    </script>
</body>
</html>